<template>
	<el-main>
	  <div class="img-container-mobile" v-for="(img, index) in imgs" keys="index">
		  <img-container :img="img"></img-container>
	  </div>
	  <div style="overflow: auto;" class="img-container-pc" v-for="(temp, index) in imgsList.length">
			<div v-for="(img, index) in imgsList[index]" keys="index">
				<img-container :img="img"></img-container>
			</div>
	  </div>
	</el-main>
</template>

<script>
import ImgContainer from './ImgContainer.vue'
export default{
	name: "ImageResult",
	data(){
		return {
			loading: true,
			imgs:[],
			imgsList: [[], [], [], []]
		}
	},
	components:{
		ImgContainer
	},
	mounted(){
		this.$axios.get('/api/images/search', {
			params:{
				keyWord: this.$route.params.keyWord
			}
		}).then(
			// 加载状态改变
			(res)=>{
				if(res.state = '200'){
					this.imgs = res.data;
					this.imgsList = [[],[],[],[]];
					if(res.data!==undefined){
						for(let i=0;i<res.data.length;i++){
							this.imgsList[i%4].push(res.data[i]);
						}
					}
				}
			}
		).catch(
			(err)=>{
				console.log(err);
			}
		)
	}
}
</script>

<style scoped>
.el-main{
	background-color: #F0F8FF;
	/* height: 100%; */
	overflow: scroll;
	overflow-x: hidden;
}
/* 媒体查询 */
@media screen and (max-width:480px) {
	.el-main{
		/* 弹性布局 */
		display: flex;
		display: -webkit-flex;
		flex-flow: row wrap;
	}
	.img-container-mobile{
		display: block;
	}
	.img-container-pc{
		display: none;
	}
}
@media screen and (min-width:480px) and (max-width:2400px) {
	.el-main{
		display: flex;
		flex-flow: row nowrap;
		align-items: flex-start;
		width: 100%;
	}
	.img-container-pc{
		width: 25%;
		display: flex;
		flex-flow: column nowrap; 
	}
	.img-container-mobile{
		display: none;
	}
}
</style>
